<template>
	<div ref="container" class="container">
		<div>
			<!--热门城市-->
			<div class="hotcity">
			    <h2>热门城市</h2>
			    <ul>
			    	<li v-for="item in hotCities" :key="item.id">{{item.name}}</li>
			    </ul>
			</div>
			
			<!--字母列表-->
			<div class="letter">
			    <h2>字母排序</h2>
			    <ul>
			    <li v-for="(item,key) in cities" :key="key" @click="changeSoter(key)">{{key}}</li>	
			    	<!--<li>A<>
			    	<li>B<>
			    	<li>C<>
			    	<li>D<>-->
			    </ul>
			</div>
			
			
			<!--城市列表-->
			<div class="num">
				<div v-for="(item,key) in cities" :key="key" :ref="key">
				<h2>{{key}}</h2>
			    <ul>
			    	<li v-for="N in item" :key="N.id">{{N.name}}</li>	
			    	<!--<li>阿坝藏族羌</li>
			    	<li>阿克苏地区</li>
			    	<li>澳门</li>-->
			    </ul>
			    </div>
		 	</div>	
	
		</div>
	</div>

	
	
</template>

<script>
import BScroll from 'better-scroll'

	export default{
	   props:["hotCities","cities"],
	   	data(){
	   		return{
	   			scroll:""
	   		}
		
		},
		mounted(){
			let container=this.$refs.container
			this.scroll=new BScroll(container)
//			,{
//				click:true
//			}
		},
		methods:{
			changeSoter(storeName){
				this.scroll.scrollToElement(this.$refs[storeName][0])
			}
		}
	
	
	}
</script>

<style scoped>
	.container{
		position: absolute;
		overflow: hidden;
		left: 0;
		right: 0;
		bottom: 0;
		top: .74rem;
	}
	/*热门城市*/
	.hotcity h2{
		background-color: #EEEEEE;
		font-size: .12rem;
		height: .4rem;
		line-height: .4rem;
		padding-left: .15rem;
	}
	.hotcity ul{
		width: 100%; 
		margin: 0 auto;
	}
	.hotcity ul li{
		width: 33%;
		height: .45rem;
		line-height: .45rem;
		float: left;
		text-align: center;
		font-size: .14rem;
		border-bottom: 1px solid #EEEEEE;
		border-right: 1px solid #EEEEEE;
	}
	
	/*字母列表样式*/
	.letter{
		clear: both;
	}
	.letter h2{
		background-color: #EEEEEE;
		font-size: .12rem;
		height: .4rem;
		line-height: .4rem;
		padding-left: .15rem;
	}
	.letter ul{
		width: 100%; 
		margin-left: .1rem;
		margin-top: .1rem;
		margin-bottom: .1rem;
	}
	.letter ul li{
		width: 16%;
		height: .4rem;
		line-height: .4rem;
		float: left;
		text-align: center;
		font-size: .14rem;
	}
	
	/*城市列表*/
	.num{
		clear: both;
	}
	.num h2{
		background-color: #EEEEEE;
		font-size: .12rem;
		height: .4rem;
		line-height: .4rem;
		padding-left: .15rem;
	}
	.num ul{
		width: 100%; 
		margin: 0 auto;
		overflow: hidden;
	}
	.num ul li{
		width: 24.6%;
		height: .45rem;
		line-height: .45rem;
		float: left;
		text-align: center;
		font-size: .14rem;
		border-bottom: 1px solid #EEEEEE;
		border-right: 1px solid #EEEEEE;
		background: #FFFFFF;
	}

</style>
